<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="personshow">
		<image class="person_picture" v-if="isLogin==true" :src="user.getPic()" @click="update"></image>
		<image class="person_picture" v-if="isLogin==false" @click="login" src="../../../static/register.png"></image>
	</view>
	
	<view class="main">
		<view class="update">
			<form @submit="formSubmit" @reset="formReset">
				<view class="ele">
					<label for="name">修改昵称</label>
					<input class="input" id="name" v-model="formData.user_name" placeholder="请输入要改变的姓名"/>
				</view>
				<view class="ele">
					<label for="gender">修改性别</label>
					<radio-group id="gender" name="gender" class="input">
					    <view class="group-item">
					       <radio value="0" :checked="formData.gender=='0'" /><text>男</text>
					    </view>
					    <view class="group-item">
					        <radio value="1" :checked="formData.gender=='1'"/><text>女</text>
					    </view>
					</radio-group>
				</view>
				<view class="ele">
					<label for="introduce">修改签名</label>
					<textarea class="textarea" id="introduce" v-model="formData.introduce" placeholder="请书写你的签名吧"/>
				</view>
				
				<view class="ele">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useCounterStore } from '@/store/user'
import { Person,Picture } from '../../../public/p_interface';
import {onShow,onLoad} from '@dcloudio/uni-app'
import Regiest from '../../../pages/regiest/regiest/regiest.vue'

	const user = useCounterStore();
	let isLogin = ref(true)

	
	
	let formData:Person ={
		user_id:'',
		user_name :'',
		gender:0,
		introduce:'',
		email: ''
	}
	const popup = ref()
	
	const update =()=>{
		uni.chooseImage({
				count: 1,
				sizeType: 'compressed',
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: 'http://121.40.242.216:8081/api/file/update', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						header:{
							'satoken':uni.getStorageSync("satoken")
						},
						success: (res) => {
							console.log(res.data)
							user.setPic(res.data)
						}
					});
				},
				fail: (data) => {}
		})
	}
	
	const login = () => {  
		uni.navigateTo({
		    url: '/pages/regiest/regiest/regiest'
		}); 
	};  
	
	const checkLogin=()=>{
		console.log("验证是否登录")
		if(user.getId()!=null){
			console.log("已登录")
			isLogin.value=true;
		}else{
			console.log("未登录")
			isLogin.value=false;
		}
	}
	
	const formSubmit = () => {
		console.log(uni.getStorageSync("satoken"));
		console.log(uni.getStorageSync("loginId"));
		uni.request({
		    url: 'http://121.40.242.216:8081/api/user/update',
			method:'POST',
		    data: {
				user_id:formData.user_id,
		        user_name:formData.user_name,
				gender:formData.gender,
				introduce:formData.introduce
		    },
		    header: {
		        'custom-header': 'hello',
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
		        console.log(res.data);
		    }
		});
		
		console.log(formData.user_name)
		console.log(formData.gender)
		console.log(formData.introduce)
	}
	const formReset = () => {
				
	}
	onLoad(()=>{
		console.log("页面初始化")
		formData.user_id=user.getId();
		checkLogin();
	})

</script>

<style>
.dio{
width: 700rpx;
height: 1000rpx;
}
.main{

}
.update{
	border-radius: 10%;
	background: white;
	margin: 20rpx;
	height: 1030rpx;
}
.ele{
	margin-left: 10rpx;
	margin-bottom: 50rpx;
	font-family: 'Georgia', serif;
}
.textarea{
	width: 680rpx;
	height: 300rpx;
	background: aliceblue;
	border-radius: 30rpx;
}
.input{
	width: 680rpx;
	height: 100rpx;
	background: aliceblue;
	border-radius: 30rpx;
}
.personshow{
	display: flex;
	justify-content: center; /* 水平居中 */  
	align-items: center; 
	border-color: black;
	border-width: 5rpx;  
	height: 370rpx;
	width: 100%;
	background: rgb(121.3, 187.1, 255);
	border-bottom-right-radius: 38%;
	border-bottom-left-radius: 38%;
	border-color: white;
	background-size: cover; /* 使背景图像覆盖整个元素 */  
	background-position: center; /* 背景图像居中对齐 */  
	background-repeat: no-repeat;
}
.person_picture{
	width: 300rpx;
	height: 250rpx;
	border-style: solid;
	border-width: 20rpx;
	border-color: aliceblue;
	border-radius: 50%;
}      
</style>
